<template>
  <div class="feedback-container">
    <van-nav-bar
      title="意见反馈"
      left-arrow
      @click-left="goBack"
      fixed
    />
    
    <div class="content-area">
      <div class="info-section">
        <p class="feedback-intro">感谢您使用医院信息系统，您的反馈对我们非常重要。请填写以下表单，帮助我们改进服务。</p>
        
        <van-form @submit="onSubmit">
          <van-cell-group inset>
            <div class="feedback-type-field">
              <div class="field-label">反馈类型</div>
              <van-radio-group v-model="feedbackType" direction="horizontal" name="feedbackType">
                <van-radio v-for="(type, index) in feedbackTypes" :key="index" :name="type">{{ type }}</van-radio>
              </van-radio-group>
              <div class="field-error" v-if="feedbackTypeError">{{ feedbackTypeError }}</div>
            </div>
            
            <van-field
              v-model="feedbackContent"
              name="feedbackContent"
              label="反馈内容"
              type="textarea"
              placeholder="请详细描述您遇到的问题或建议（10-200字）"
              rows="4"
              autosize
              :rules="[{ required: true, message: '请填写反馈内容' }]"
              @blur="validateFeedbackContent"
            />
            <div class="field-error" v-if="feedbackContentError">{{ feedbackContentError }}</div>
            
            <van-field
              v-model="contactInfo"
              name="contactInfo"
              label="联系方式"
              placeholder="请留下您的手机号或邮箱（选填）"
              @blur="validateContactInfo"
            />
            <div class="field-error" v-if="contactInfoError">{{ contactInfoError }}</div>
          </van-cell-group>
          
          <div class="upload-section">
            <div class="upload-title">上传截图（选填）</div>
            <van-uploader
              v-model="fileList"
              multiple
              :max-count="3"
              :after-read="afterRead"
            />
          </div>
          
          <div style="margin: 16px;">
            <van-button round block type="primary" @click="validateAndSubmit">
              提交反馈
            </van-button>
          </div>
        </van-form>
      </div>
    </div>
    
    
    
    <!-- 提交成功弹窗 -->
    <van-dialog v-model:show="showSuccessDialog" title="提交成功" confirm-button-text="确定" @confirm="goBack">
      <div class="success-message">
        <van-icon name="success" size="48" color="#07c160" />
        <p>感谢您的反馈，我们会尽快处理！</p>
      </div>
    </van-dialog>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

// 表单数据
const feedbackType = ref('')
const feedbackContent = ref('')
const contactInfo = ref('')
const fileList = ref([])

// 表单错误信息
const feedbackTypeError = ref('')
const feedbackContentError = ref('')
const contactInfoError = ref('')

// 反馈类型选项
const feedbackTypes = [
  '功能建议',
  '操作问题',
  '系统故障',
  '界面优化',
  '其他问题'
]

// 控制弹窗显示
const showSuccessDialog = ref(false)

// 表单验证函数
const validateFeedbackType = () => {
  if (!feedbackType.value) {
    feedbackTypeError.value = '请选择反馈类型'
    return false
  }
  feedbackTypeError.value = ''
  return true
}

const validateFeedbackContent = () => {
  if (!feedbackContent.value) {
    feedbackContentError.value = '请填写反馈内容'
    return false
  } else if (feedbackContent.value.length < 10) {
    feedbackContentError.value = '反馈内容不能少于10个字符'
    return false
  } else if (feedbackContent.value.length > 200) {
    feedbackContentError.value = '反馈内容不能超过200个字符'
    return false
  }
  feedbackContentError.value = ''
  return true
}

const validateContactInfo = () => {
  if (contactInfo.value) {
    // 验证手机号
    const phoneRegex = /^1[3-9]\d{9}$/
    // 验证邮箱
    const emailRegex = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
    
    if (!phoneRegex.test(contactInfo.value) && !emailRegex.test(contactInfo.value)) {
      contactInfoError.value = '请输入正确的手机号或邮箱格式'
      return false
    }
  }
  contactInfoError.value = ''
  return true
}

// 处理图片上传
const afterRead = (file) => {
  // 这里可以处理图片上传逻辑，例如压缩、预览等
  console.log('文件上传:', file)
}

// 验证并提交表单
const validateAndSubmit = () => {
  const isTypeValid = validateFeedbackType()
  const isContentValid = validateFeedbackContent()
  const isContactValid = validateContactInfo()
  
  if (isTypeValid && isContentValid && isContactValid) {
    const formData = {
      feedbackType: feedbackType.value,
      feedbackContent: feedbackContent.value,
      contactInfo: contactInfo.value,
      fileList: fileList.value
    }
    
    console.log('表单提交:', formData)
    // 这里可以添加实际的提交逻辑，例如发送API请求
    
    // 模拟提交成功
    showToast('提交成功')
    showSuccessDialog.value = true
  } else {
    showToast('请检查表单填写是否正确')
  }
}

// 表单提交（保留原有方法以兼容van-form组件）
const onSubmit = (values) => {
  validateAndSubmit()
}

// 返回上一页
const goBack = () => {
  router.back()
}
</script>

<style scoped>
.feedback-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  padding-top: 46px;
}

.content-area {
  padding: 20px 16px;
}

.info-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(100, 101, 102, 0.08);
}

.feedback-intro {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.5;
}

.upload-section {
  margin: 16px;
}

.upload-title {
  margin-bottom: 8px;
  font-size: 14px;
  color: #646566;
}

.feedback-type-field {
  padding: 10px 16px;
  margin-bottom: 8px;
}

.field-label {
  margin-bottom: 8px;
  font-size: 14px;
  color: #323233;
  font-weight: normal;
}

.field-error {
  color: #ee0a24;
  font-size: 12px;
  margin-top: 4px;
  line-height: 1.4;
}

.success-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.success-message p {
  margin-top: 16px;
  color: #323233;
}
</style>